<template>
  <view class="podium">
    <view class="first-place rank-item">
      <view class="avatar">
        <view class="huangguan-box">
          <Crown
            icon="icon-huangguan2"
            icon-color="#c6d3e3"
            icon-font-size="80rpx"
            icon-text="2"
            icon-text-color="#8FA2BB"
            icon-text-font-size="24rpx"
            translateY="-70%"
          ></Crown>
        </view>

        <TImage
          height="128rpx"
          width="128rpx"
          border-radius="50%"
          border="4rpx solid white"
          boxShadow="0px 4rpx 8rpx 0px rgba(31, 79, 159, 0.20);"
          :src="topThree[1]?.avatar"
          error-img-type="person"
        ></TImage>
        <view class="bottom">
          <TImage
            src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/rank-bottom1.png"
            height="200rpx"
            width="100%"
          ></TImage>
        </view>
      </view>
      <view class="name-number">
        <text class="name">{{ topThree[1]?.userName || '虚位以待' }}</text>
        <text class="number">
          <template v-if="topThree[1]?.rankValue">{{ topThree[1]?.rankValue }}人</template>
          <template v-else>--</template>
        </text>
      </view>
    </view>
    <view class="second-place rank-item">
      <view class="avatar">
        <view class="huangguan-box">
          <Crown
            icon="icon-huangguan1"
            icon-color="#fff001"
            icon-font-size="80rpx"
            icon-text="1"
            icon-text-color="#B0A600"
            icon-text-font-size="24rpx"
            translateY="-70%"
          ></Crown>
        </view>
        <TImage
          height="128rpx"
          width="128rpx"
          border-radius="50%"
          boxShadow="0px 4rpx 8rpx 0px rgba(31, 79, 159, 0.20);"
          border="4rpx solid white"
          :src="topThree[0]?.avatar"
          error-img-type="person"
        ></TImage>
        <view class="bottom">
          <TImage
            src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/rank-bottom2.png"
            height="200rpx"
            width="100%"
          ></TImage>
        </view>
      </view>
      <view class="name-number">
        <text class="name">{{ topThree[0]?.userName || '虚位以待' }}</text>
        <text class="number">
          <template v-if="topThree[0]?.rankValue">{{ topThree[0]?.rankValue }}人</template>
          <template v-else>--</template>
        </text>
      </view>
    </view>
    <view class="third-place rank-item">
      <view class="avatar">
        <view class="huangguan-box">
          <Crown
            icon="icon-huangguan3"
            icon-color="#f8a86e"
            icon-font-size="80rpx"
            icon-text="3"
            icon-text-color="#C77B44"
            icon-text-font-size="24rpx"
            translateY="-70%"
          ></Crown>
        </view>
        <TImage
          height="128rpx"
          width="128rpx"
          border-radius="50%"
          boxShadow="0px 4rpx 8rpx 0px rgba(31, 79, 159, 0.20);"
          border="4rpx solid white"
          error-img-type="person"
          :src="topThree[2]?.avatar"
        ></TImage>
        <view class="bottom">
          <TImage
            src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/rank-bottom3.png"
            height="200rpx"
            width="100%"
          ></TImage>
        </view>
      </view>
      <view class="name-number">
        <text class="name">{{ topThree[2]?.userName || '虚位以待' }}</text>
        <text class="number">
          <template v-if="topThree[2]?.rankValue">{{ topThree[2]?.rankValue }}人</template>
          <template v-else>--</template>
        </text>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
  import TImage from '@/components/TImage/index.vue';
  import Crown from '../InvitationRankingMain/Crown.vue';
  import type { IRankList } from '@/api/activity/types';
  const props = defineProps({
    topThree: {
      type: Array as () => IRankList[],
      default: () => [],
    },
  });
</script>
<style lang="scss" scoped>
  .podium {
    display: flex;
    align-items: flex-end;
  }

  .rank-item {
    flex: 1;
    .avatar {
      width: 100%;
      height: 200rpx;
      display: flex;
      position: relative;
      align-items: flex-end;
      justify-content: center;
      padding-bottom: 16rpx;
      .huangguan-box {
        position: absolute;
        font-size: 80rpx;
        left: 50%;
        top: 5rpx;
        transform: translateX(-50%);
      }
      .bottom {
        position: absolute;
        left: 0;
        bottom: 0;
        height: 200rpx;
        width: 100%;
      }
    }

    .name-number {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 16rpx;
      justify-content: center;
      align-items: center;
      .name {
        color: #fff;
        font-size: 28rpx;
        font-weight: 400;
        line-height: 40rpx;
      }
      .number {
        color: #f6e54a;
        font-size: 28rpx;
        font-weight: 700;
        line-height: 40rpx;
      }
    }
  }

  .first-place .name-number {
    height: 200rpx;
    background: linear-gradient(180deg, #2875f6 0%, rgba(40, 117, 246, 0) 100%);
  }

  .second-place .name-number {
    height: 240rpx;
    background: linear-gradient(180deg, #2878ff 25%, rgba(40, 120, 255, 0) 79.02%);
    box-shadow: 0rpx 8rpx 24rpx 0rpx rgba(31, 79, 159, 0.1);
  }

  .third-place .name-number {
    height: 160rpx;
    background: linear-gradient(180deg, #2875f6 0%, rgba(40, 117, 246, 0) 100%);
  }
</style>
